<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
  <title>判断类样式是否存在</title>
  <style>
    #pic {
      border: 1px solid black;
    }
	.jia{
		font-size: 20px;
	}
    .jian{
		font-size: 30px;
	}
  </style>
</head>
<body>
<!--<div id="app" class=" add  cla test">判断类样式是否存在</div>-->
<div id="app">判断类样式是否存在</div>
<div  class="dian">点击增加样式</div>
<div  class="dian jian">点击删除样式</div>
<img class="lazy" id="pic"
     imgSrc="https://web17.oss-cn-hangzhou.aliyuncs.com/yelusheleng.jpg"
     src="https://web17.oss-cn-hangzhou.aliyuncs.com/bg_pic.png"
     alt="资源不存在"/>
<script>
  /**
   * 替换图片的属性
   * @param imgObj
   */
  function replaceImageSrc(imgObj) {
    //非法参数
    if (!imgObj || !imgObj.getAttribute('src') || !imgObj.getAttribute('imgSrc')) return
    //创建图片对象
    let img = new Image()
    //获得imgObj的imgSrc
    let imgSrc = imgObj.getAttribute('imgSrc')
    //监听img的加载过程
    img.onload = function() {
      //图片显示结束
      if (img.complete) {
        //替换路径
        imgObj.src = imgSrc
        //删除类样式
        removeClass(imgObj, 'lazy')
        //删除属性
        imgObj.removeAttribute('imgSrc')
      }
    }
    img.src = imgSrc
  }

  /**
   * 1、判断dom对象class属性值是否包含targetName
   * @param domObject
   * @param targetName
   * @return (boolean) true表示包含targetName，false表示不包含targetName
   */
  function hasClass(domObject, targetName) {
    //参数非法处理
    if (!domObject || !domObject.className || !targetName) return false
    //可以对字符串使用空格分割成数组,使用空格对字符串进行分割
    let arr = domObject.className.trim().split(' ').filter(item => item !== '')
    //判断数组中是否包含某个元素,如果下标是-1,表示没有，>=0说明元素存在
    return arr.findIndex(item => item === targetName.trim()) >= 0
  }

  /**
   * 2、给dom元素添加类样式
   * @param domObject
   * @param targetName
   */
  function addClass(domObject, targetName) {
    //非法参数
    if (!domObject || !targetName) return
    //判断是否存在targetName
    if (hasClass(domObject, targetName)) return
    //domObject没有class属性
    if (domObject.className === '') {
      domObject.className += targetName
    } else {
      domObject.className += ' ' + targetName
    }
  }

  /**
   * 删除指定的targetName
   * @param domObject
   * @param targetName
   */
  function removeClass(domObject, targetName) {
    //非法参数
    if (!domObject || !domObject.className || !targetName) return
    //没有此targetName，不删除
    if (!hasClass(domObject, targetName)) return
    //获得class的属性值
    let str = String(domObject.className)
    //使用空字符串替换targetName
    str = str.replace(targetName, '')
    //重新赋值给domObject
    domObject.className = str.trim()
    if (domObject.className === '') {
      domObject.removeAttribute('class')
    }
  }


  document.getElementsByClassName('dian')[0].onclick = function(){
    console.log(this)
    addClass(this, 'jia')
  }
  
  document.getElementsByClassName('dian')[1].onclick = function(){
	  console.log(this)
	  removeClass(this, 'jian')
  }
  let pic = document.getElementById('pic')
  //图片加载成功，异步操作，没有图片资源就没有onload执行过程
  // pic.onload = function() {
  //   console.log('图片加载成功！')
  // }
  //只有图片显示结束时才为true，在onload结束前都是false
  // if (pic.complete) {
  //   console.log('图片显示结束！')
  // }
  pic.onclick = function() {
    replaceImageSrc(this)
  }
</script>
</body>
</html>
